<template>
  <div class="textarea-cpt-wrap">
    <el-input
      v-model="content"
      type="textarea"
      resize="none"
      :rows="5"
      show-word-limit
      maxlength="200"
    />
    <span class="tip">支持markdown</span>
  </div>
</template>

<script lang="ts" scoped>
import { defineComponent, watch, ref } from 'vue'
export default defineComponent({
  name: 'TextareaInput',
  props: {

  },
  emits: {
    'content-change': (payload: any) => {
      return payload
    }
  },
  setup (props, { emit }) {
    const content = ref(null)
    watch(() => content, (newVal, oldVal) => {
      console.log(newVal)
      emit('content-change', { newVal, oldVal })
    })
    return { content }
  }
})
</script>

<style>
/* style在scoped环境下重写覆盖默认element样式不行，得去掉scoped */
.textarea-cpt-wrap .el-textarea__inner {
  padding-bottom: 20px;
}
</style>

<style lang="scss" scoped>
@import '@/assets/css/constant.scss';

.textarea-cpt-wrap {
  height: 200px;
  position: relative;
  .tip {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 6px 8px;
    color: $theme-color1;
    font-size: 14px;
    font-weight: bold;
  }
  .btn {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
